<template>
    <div class="container">
        <grading-paper-close-button target=".container" />
        <el-row :gutter="10" class="row">
            <el-col :span="24">
                <div class="cell" id="userScore"></div>
            </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
            <el-col :span="12">
                <div class="cell" id="segmentation"></div>
            </el-col>
            <el-col :span="12">
                <div class="cell" id="passRate"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from "vue";
import { Bar, Pie, disposeChart, type ECharts } from "@/utils/echarts";
import GradingPaperCloseButton from "@/views/system/components/gradingPaper/GradingPaperCloseButton.vue";

//父传子
interface Props {
    statistics?: Record<string, any>;
}
const props = withDefaults(defineProps<Props>(), {
    statistics: () => ({}),
});

//ECharts图实例
const userScoreInstance = ref<ECharts | null>();
const segmentationInstance = ref<ECharts | null>();
const passRateInstance = ref<ECharts | null>();

//初始化数据
const init = () => {
    disposeChart(userScoreInstance.value!);
    disposeChart(segmentationInstance.value!);
    disposeChart(passRateInstance.value!);
    const { userScoreList, segmentation, passRate } = props.statistics;
    //用户得分
    userScoreInstance.value = Bar.userScore({
        id: "userScore",
        xData: userScoreList.map((item: any) => item.name),
        yData: userScoreList.map((item: any) => item.score),
        title: "全班分数统计",
        subtext: "分数",
    } as ChartOptions);

    //各分数段人数
    const seg = Object.entries(segmentation).map(([name, value]: [string, any], _index) => ({ value: parseInt(value), name: name }));
    segmentationInstance.value = Pie.segmentation("segmentation", seg, "各分数段人数", "人数");

    //通过率
    passRateInstance.value = Pie.passRate("passRate", passRate, `通过率`);
};

onMounted(() => init());

//销毁
onBeforeUnmount(() => {
    disposeChart(userScoreInstance.value!);
    disposeChart(segmentationInstance.value!);
    disposeChart(passRateInstance.value!);
});
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    position: relative;
    .row {
        width: 100%;
        margin-top: 10px;
        .cell {
            width: 100%;
            height: 400px;
            border-radius: 10px;
            background-color: rgba(67, 67, 67, 0);
            border: 1px solid rgba(74, 74, 74, 0.2);
            position: relative;
        }
    }
}
</style>
